<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useWujie } from '../hooks/useWujie'

const route = useRoute()
const router = useRouter()
const { emitNavigate } = useWujie()

interface DetailData {
  id: number
  name: string
  status: string
  createTime: string
  amount: number
  description: string
}

const detailData = ref<DetailData>({
  id: 0,
  name: '',
  status: '',
  createTime: '',
  amount: 0,
  description: ''
})

onMounted(() => {
  // 这里模拟获取详情数据
  const id = Number(route.params.id)
  // 实际项目中这里应该调用API获取数据
  detailData.value = {
    id,
    name: `测试数据${id}`,
    status: '正常',
    createTime: '2024-03-20',
    amount: 100,
    description: '这是一段详细的描述信息'
  }
})

// 返回列表页
const goBack = () => {
  router.back()
}

// 跳转到个人资料页
const goToProfile = () => {
  router.push('/profile')
  // 通知主应用更新菜单
  emitNavigate({
    path: '/sub/profile'
  })
}
</script>

<template>
  <div class="detail-container">
    <a-card>
      <template #title>
        <a-space>
          <a-button @click="goBack">返回</a-button>
          <span>数据详情</span>
        </a-space>
      </template>
      
      <a-descriptions bordered>
        <a-descriptions-item label="ID">{{ detailData.id }}</a-descriptions-item>
        <a-descriptions-item label="名称">{{ detailData.name }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ detailData.status }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ detailData.createTime }}</a-descriptions-item>
        <a-descriptions-item label="金额">{{ detailData.amount }}</a-descriptions-item>
        <a-descriptions-item label="描述">{{ detailData.description }}</a-descriptions-item>
      </a-descriptions>

      <div class="action-container">
        <a-button type="primary" @click="goToProfile">查看个人资料</a-button>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
.detail-container {
  padding: 24px;
}

.action-container {
  margin-top: 24px;
  text-align: center;
}
</style> 